<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta content="telephone=no" name="format-detection" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap" class="wrapper">
	<div class="pic-canvas-box" id="pic-canvas-box">
		<canvas id="myCanvas1" width="500" height="500">您的浏览器不支持canvas</canvas>
		<canvas id="myCanvas3" width="500" height="500"></canvas>
		<canvas id="myCanvas2" width="500" height="500" style="display:none;"></canvas>
	</div>
	<canvas class="bgCanvas" id="bgCanvas" width="500" height="500"></canvas>
	<div class="confrm-box-btn" id="Jhasinput">
		<div class="btn reupload_btn"><img src="./images/upload_btn.png" alt=""><input type="file" class="sign upfile" data-id="upload" accept="image/*" name="fileToUpload" id="fileToUpload" onchange="camear.fileChange(this);"></div>
		<div class="btn" id="Jcommit"><img src="./images/confirm_btn.png" alt=""></div>
	</div>
</div>
<script src="js/Zepto.js" type="text/javascript"></script>
<script src="js/exif-js-2.3.0.min.js" type="text/javascript"></script>
<script src="js/megapiximage.js" type="text/javascript"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script type="text/javascript">
	//选取图片后回调
    function camearCallback() {

    }

   $(function(){

		//选择图片后进行转换上传
		$('#Jcommit').click(function(){
            $('#bgCanvas').hide();
			var imgData = camear_variable.canvas1.toDataURL();
			console.log(imgData)
		});

   })


	//计算div坐标
	function getElementPos(elementId){
		var ua = navigator.userAgent.toLowerCase();
		var isOpera = (ua.indexOf('opera') != -1);
		var isIE = (ua.indexOf('msie') != -1&& !isOpera); // not opera spoof
		var el = document.getElementById(elementId);
		if(el.parentNode === null|| el.style.display == 'none') {
			returnfalse;
		}
		var parent =null;
		var pos = [];
		var box;
		if(el.getBoundingClientRect) //IE
		{
			box = el.getBoundingClientRect();
			var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
			var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
			return {
				x: box.left + scrollLeft,
				y: box.top + scrollTop
			};
		}
		else
		if (document.getBoxObjectFor)
		{
			box = document.getBoxObjectFor(el);
			var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) :0;
			var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) :0;
			pos = [box.x - borderLeft, box.y - borderTop];
		}
		else // safari & opera
		{
			pos = [el.offsetLeft, el.offsetTop];
			parent = el.offsetParent;
			if (parent != el) {
				while (parent) {
					pos[0] += parent.offsetLeft;
					pos[1] += parent.offsetTop;
					parent = parent.offsetParent;
				}
			}
			if (ua.indexOf('opera') != -1|| (ua.indexOf('safari') != -1&& el.style.position == 'absolute'))
			{
				pos[0] -= document.body.offsetLeft;
				pos[1] -= document.body.offsetTop;
			}
		}
		if(el.parentNode) {
			parent = el.parentNode;
		}
		else{
			parent = null;
		}
		while(parent && parent.tagName != 'BODY'&& parent.tagName != 'HTML') {// account for any scrolled
			ancestors
			pos[0] -= parent.scrollLeft;
			pos[1] -= parent.scrollTop;
			if (parent.parentNode) {
				parent = parent.parentNode;
			}
			else {
				parent = null;
			}
		}
		return{
			x: pos[0],
			y: pos[1]
		};
	}
    var xd = getElementPos("pic-canvas-box");
    console.log(xd.x, xd.y);
</script>
</body>
</html>
